<template>
  <div>
    <span>公众号推文选择：</span>
    <a-button @click="showModal" type="primary">+&nbsp;添加</a-button>

    <div class="model" ref="model">
      <a-modal :visible="visible" title="公众号推文选择" @ok="handleOk" @cancel="handleOk" :footer="null" :getContainer="() => $refs.model">
        <a-form :model="formData">
          <a-row>
            <a-col :span="12">
              <a-form-item label="搜索名称">
                <a-input style="width: 240px" v-model:value="formData.searchName"></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="公众号推文ID">
                <a-input placeholder="多个ID,请使用英文,分隔" style="width: 240px" v-model:value="formData.searchId"></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12">
              <a-button type="primary" size="small" @click="addMore">+批量添加</a-button>
            </a-col>
            <a-col :span="12">
              <a-button size="small" class="btn-right" @click="reset">重置</a-button>
              <a-button type="primary" size="small" class="btn-right" @click="search">查询</a-button>
            </a-col>
          </a-row>
          <a-row style="margin-top: 10px">
            <a-table
              :pagination="pagination"
              :columns="columns"
              :data-source="datalist"
              :footer="null"
              :rowSelection="{
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }"
              :rowKey="
                (record, index) => {
                  return record.id
                }
              "
              style="width: 1150px"
            >
              <span slot="add" slot-scope="text, record">
                <a class="btn" @click="addFn(record)">添加</a>
              </span>
            </a-table>
          </a-row>
        </a-form>
      </a-modal>
    </div>
    <a-table bordered :columns="columns2" :data-source="discountList" style="width: 1000px; margin-top: 10px" :pagination="false" :footer="null" v-if="discountList.length> 0">
      <span slot="add" slot-scope="text, record">
        <a class="btn" @click="delFn(record)">删除</a>
      </span>
    </a-table>
  </div>
</template>
<script>
import { getWeChatGraphicMsgList } from '@/api/task/taskscene.js'

const columns = [
  {
    title: '公众号推文ID',
    dataIndex: 'articleId',
    key: 'articleId'
  },
  {
    title: '公众号推文标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '操作',
    dataIndex: 'add',
    key: 'add',
    width:"10%",
    scopedSlots: { customRender: 'add' }
  }
]
const columns2 = [
  // {
  //   title: '序号',
  //   key: 'index',
  //   customRender: text => {
  //     return text.index + 1
  //   }
  // },
  {
    title: '公众号推文ID',
    dataIndex: 'articleId',
    key: 'articleId'
  },
  {
    title: '公众号推文标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '操作',
    dataIndex: 'add',
    key: 'add',

    scopedSlots: { customRender: 'add' }
  }
]
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  }
}

export default {
  props:["graphicList"],
  components: {},
  data() {
    return {
      formData: {
        searchName: '',
        searchId: ''
      },
      visible: false,
      datalist: [],
      multiple: [], //多选
      columns,
      columns2,
      discountList: [],
      Type: '不限',
      rowSelection,
      btnId: '',
      expandedRowKeys: [],
      selectedRowKeys: [],
      discountType: [
        { label: '不限', value: 1 },
        { label: '优惠券', value: 2 },
        { label: '现金券', value: 3 }
      ],
      pagination: {
       //表格自带分页器的属性定义
       pageNo: 1,
        pageSize: 10,//默认每页显示10条数据
        total:0,
        showTOtal: (total) => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: [ "10", "20", "30","40"], //自定义每页显示多少条数据
        onShowSizeChange: (current, pageSize) => (this.pageSize = pageSize),
        showQuickJumper: true, //允许跳转至xx页
         onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize), // 改变每页数量时更新显示
        onChange:(page,pageSize)=>this.onPageChange(page,pageSize),//点击页码事件
      }
    }
  },
  methods: {
    // 批量添加
    onPageChange(page, pageSize) {
      this.pagination.pageNo = page
       this.getWeChatTxt()
   },
   onSizeChange(current, pageSize) {
       this.pagination.pageNo = 1
       this.pagination.pageSize = pageSize
        this.getWeChatTxt()
   } ,
    addMore() {
      this.discountList.push(...this.multiple)
      console.log(this.discountList)
      this.sendChooseData()
      this.visible = false
      this.selectedRowKeys = []
    },
    delFn(e) {
      this.discountList.splice(this.discountList.indexOf(e), 1)
      console.log(this.discountList)
      this.sendChooseData()
    },
    addFn(e) {
      this.discountList.push(e)
      console.log(this.discountList)
      this.selectedRowKeys = []
      this.sendChooseData()
      this.visible = false
    },
    getWeChatTxt() {
      let pageNum=this.pagination.pageNo;
      let pageSize=this.pagination.pageSize
      let articleId = this.formData.searchId
      let title = this.formData.searchName
      let data = {
        pageNum: pageNum,
        pageSize: pageSize,
        articleId: articleId,
        title: title
      }
      getWeChatGraphicMsgList(data, res => {
        console.log(res)
         this.pagination.total=res.data.total
        this.datalist = res.data.records
      })
    },
    sendChooseData() {
      this.$emit('chooseData', this.discountList)
    },
    // 点击显示弹窗
    showModal() {
      this.getWeChatTxt()
      this.visible = true
    },
    handleChange(value) {
      console.log(value)
    },
    handleOk(e) {
      console.log(e)
      this.visible = false
      ;(this.formData.searchName = ''), (this.formData.searchId = ''), (this.selectedRowKeys = [])
      this.formData.discountType = null
    },
    onSelectChange: function(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
      let datas = JSON.parse(JSON.stringify(selectedRows))

      this.multiple = datas
      // 赋值同步本地data接受数据(这里只取id即可)
      this.selectedRowKeys = selectedRowKeys
    },

    reset() {
      ;(this.formData.searchName = ''), (this.formData.searchId = ''), (this.selectedRowKeys = [])
      this.formData.discountType = null

      this.getWeChatTxt()
    },
    search() {
      this.getWeChatTxt()
    }
  },

  created() {
    this.getWeChatTxt()
  if(this.graphicList){
      let data=JSON.parse(JSON.stringify(this.graphicList))
    this.discountList=data
  }else{
    return
  }
  }
}
</script>
<style scoped lang="less">
.btn-right {
  width: 70px;
  margin-right: 10px;
  float: right;
}
.ant-modal {
  width: 1200px;
}
.ant-table-thead {
  font-weight: bold !important;
  text-align: center;
}
.ant-form-item {
  display: flex;
}
div /deep/ .model .ant-modal {
  width: 1200px !important;
}
</style>
